<script>
	import { count, time, elapsed, doubled, summed, countnum } from './store';
	function decrement() {
		count.update((n) => n - 1);
	}
	function increment() {
		count.update((n) => n + 1);
	}
	function reset() {
		count.set(0);
	}
	const time_options = {
		hour12: false,
		weekday: 'long',
		year: 'numeric',
		month: 'long',
		day: 'numeric',
		hour: 'numeric',
		minute: '2-digit',
		second: '2-digit'
		// calendar: 'chinese',
	};
	const formatter = new Intl.DateTimeFormat('zh', time_options);
</script>

<div class="w-full p-20 bg-gray-200 rounded-lg">
	<p class="text-center text-yellow-700 ">store例子 只读、可写、派生</p>
	<div class="text-center text-green-800 ">{$count} {$doubled} {$summed}</div>
	<div class="text-center text-red-600">
		<button on:click={decrement}>-</button>
		<button on:click={increment}>+</button>
		<button on:click={reset}>reset</button>
	</div>
	<div class="text-center text-green-400 ">
		<h1>现在时间是{formatter.format($time)}</h1>
		<p>页面运行 {$elapsed} {$elapsed === 1 ? '秒钟' : '秒'}</p>
	</div>
	<div class="p-10 mt-5 text-center bg-gray-400 rounded-lg">
		<h1>The count is {$countnum}</h1>

		<button on:click={countnum.increment}>+</button>
		<button on:click={countnum.decrement}>-</button>
		<button on:click={countnum.reset}>reset</button>
	</div>
</div>

<style>
	button {
		padding: 5px;
		width: 50px;
		background-color: #fff000;
	}
</style>
